<template>
    <el-dialog v-model="dialogVisible" width="50%" title="新增用户" @close="closeWin" destroy-on-close center>
        <template #default>
            <el-form :model="newUser" label-width="auto" >
                <el-form-item label="头像">
                    <el-upload
                        ref="upload"
                        class="upload-demo"
                        :limit="1"
                        :on-exceed="handleExceed"
                        :on-change="handleChange"
                        :auto-upload="false"
                    >
                        <template #trigger>
                            <el-button type="primary">选择文件</el-button>
                        </template>
                        <el-button class="ml-3" type="success" @click="submitUpload">
                            上传文件
                        </el-button>
                        <template #tip>
                            <div class="el-upload__tip text-red">
                                只能选择一个文件
                            </div>
                        </template>
                    </el-upload>
                </el-form-item>
            </el-form>
        </template>
        <!-- footer插槽中放两个按钮 -->
        <template #footer>
            <el-row>
                <el-col :span="20"><el-button type="primary" @click="doSubmit">提交</el-button></el-col>
                <el-col :span="4">
                    <el-button type="primary" @click="closeWin">关闭</el-button>
                </el-col>
            </el-row>
        </template>
    </el-dialog>
</template>

<script>
import {watch} from "vue";
import UserRequest from '../../../api/user.js';
import request from '../../../util/request.js';
export default {
    props:["visible"],// 属性
    emits:["optionCompleted"],// 暴漏的事件
    name: "upload-demo.vue",
    data(){
        return{
            dialogVisible: false, // 弹窗标记
            newUser:{deptId:12},// 保存新用户对象
            imageUrl:undefined,// 上传成功之后头像的访问地址
            uploadUrl:"http://localhost:8080/sys/upload/image",// 上传文件的地址
            uploadFile:undefined,// 保存要上传的文件
        }
    },methods:{
        /**
         * 	当超出限制时，执行的钩子函数
         */
        handleExceed(files,uploadFiles){
            uploadFiles[0] = files[0];
            // 当选择文件数量超过过上限的时候记录要上传的文件
            this.uploadFile = uploadFiles[0];
            console.log(this.uploadFile)
        },
        /**
         * 文件状态改变时的钩子，添加文件、上传成功和上传失败时都会被调用
         */
        handleChange(uploadFile,uploadFiles){
            // 当第一次选择的时候记录要上传的文件
            this.uploadFile = uploadFile.raw;
            console.log(this.uploadFile)
        },
        /**
         * 上传按钮
         */
        submitUpload(){
            // 可以获取到文件
            if(this.uploadFile){
                // 通过formData来上传文件
                // 创建一个formData对象
                let formData = new FormData();
                // 添加数据  数据就是key-value
                formData.append("file",this.uploadFile);
                // 上传文件
                request.post("http://localhost:8080/sys/upload/image",formData,res=>{
                    console.log(res);
                });
            }
        },
        /**
         * 关闭当前的窗体
         */
        closeWin(){
            // 通知父窗体，操作完成
            this.$emit("optionCompleted");
        }
    },mounted(props) {
        //this.loadDictItems();
        // 侦听props   一旦发生变化，就会出发下面的函数
        watch(() => this.visible, (newVal, oldVal) => {
            // 将最新的值设置给弹窗的dialogVisible属性
            this.dialogVisible = newVal;
        })
    }
}
</script>

<style scoped>
.avatar-uploader .avatar {
    width: 178px;
    height: 178px;
    display: block;
}
</style>

<style>
 .avatar-uploader .el-upload {
     border: 1px dashed var(--el-border-color);
     border-radius: 6px;
     cursor: pointer;
     position: relative;
     overflow: hidden;
     transition: var(--el-transition-duration-fast);
 }

.avatar-uploader .el-upload:hover {
    border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    text-align: center;
}
</style>